<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <syxList></syxList>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '../mixin'

    export default {
        mixins: [mixin],
        components: {
        },
        data() {
            return {
                codeStr: `<syxList></syxList>

源代码展示:
  <el-table
            @select="onTableSelect"
            @select-all="onTableSelect"
            ref="multipleTable"
            :data="list"
            :border="border"
            :height="height"
            :stripe="stripe"
            :style="{width:width}">
        <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
        <el-table-column
                v-for="(v,i) in listShow"
                :key="keys+'_'+i"
                :prop="v.prop"
                :label="v.label"
                :width="v.width || ''">
        </el-table-column>
        <!--自定义列内容-->
        <slot name="customField"></slot>
        <!--操作列内容-->
        <template v-if="operate">
            <slot name="operate"></slot>
        </template>
    </el-table>



    props: {
            /**
             * 高度
             */
            height: {
                type: String,
                default: () => ('90%')
            },
            /**
             * 表显示数据
             */
            listShow: {
                type: Array,
                default: () => ([])
            },
            /**
             * 是否需要多选
             */
            selection: {
                type: Boolean,
                default: () => (false)
            },
            /**
             * 是否需要斑马线
             */
            stripe: {
                type: Boolean,
                default: () => (false)
            },
            /**
             * 是否需要操作
             */
            operate: {
                type: Boolean,
                default: () => (false)
            },
            /**
             * 是否需要边框
             */
            border: {
                type: Boolean,
                default: () => (false)
            },
            /**
             * 是否需要宽度
             */
            width: {
                type: String,
                default: () => ('100%')
            },
            /**
             * 是否需要 key
             */
            keys: {
                type: String,
                default: () => ('sun')
            },
            /**
             * 列表数据
             */
            list: {
                type: Array,
                default: () => ([])
            }
        },



         methods: {
            /**
             * 多选触发
             * @param rows
             * @param row
             */
            onTableSelect(rows, row) {
                this.$emit("onTableSelect", rows);
            },
            /**
             * 清空选中缓存
             */
            clear() {
                this.$refs.multipleTable.clearSelection();
            },
        }
        `
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
